const {src,dest,watch,parallel} = require('gulp')
const sass = require('gulp-sass')(require('sass')); // 使用sass
const gls = require('gulp-live-server') // 创建服务
const uglify = require('gulp-uglify'); // 压缩js
const cleanCSS = require('gulp-clean-css'); // 压缩css

// 处理html：输出
function html(){
    return src('src/*.html').pipe(dest('dist'))
}
// 处理css库：压缩，输出
function cssInit(){
    return src('src/styles/*.css').pipe(cleanCSS({compatibility: 'ie8'})).pipe(dest('dist/css'))
}
// 处理样式：编译sass，压缩，输出
function css(){
    return src('src/styles/*.scss').pipe(sass()).pipe(cleanCSS({compatibility: 'ie8'})).pipe(dest('dist/css'))
}
// 处理js库，不需压缩直接输出
function jsLibInit(){
    return src('src/js/lib/*.js').pipe(dest('dist/js/lib'))
}
// 处理js：抛去库，压缩，输出
function js(){
    return src(['src/js/**/*.js','!src/js/lib/**']).pipe(uglify()).pipe(dest('dist/js'))
}
// 处理图片：输出
function img(){
    return src('src/img/**').pipe(dest('dist/img'))
}

// 启动server
function server(cb){
    const server = gls.static('dist',80)
    server.start()
    cb()
}
// 监听变化
function watchChange(cb){
    watch('src/*.html', html)
    watch('src/styles/*.scss', css)
    watch(['src/js/**/*.js','!src/js/lib/**'],js)
    watch('src/img/**',img)
    cb()
}
exports.server = parallel(html,cssInit,css,img,jsLibInit,js,server,watchChange)
